import React, { Component } from 'react';
import {
  Card,
  Tabs,
  Input,
  DatePicker,
  Button,
  Table,
  Tag,
  Space,
  Pagination,
  message,
} from 'antd';
import moment from 'moment';

import { AudioOutlined } from '@ant-design/icons';
const { Search } = Input;
const { TabPane } = Tabs;
import './idnex.less';
import { history } from 'umi';

//存页码
import { setLocal, getLocal } from '../../util/localset';
//接口
import { activiesList, deleteActivies } from '../../api/modules/activies.js';

//二级路由创建活动
type TpageQUery = {
  data: {}[];
};
const dateFormat = 'YYYY/MM/DD';
export default class makeActivities extends Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      columns: this.columns || [],
      data: [],
      total: null,
      pageQUery: {
        page: getLocal('pageindex') || 1,
        pageSize: 10,
        //活动开始时间
        timeQuery: null,
        //活动名称
        activityName: '',
        // 活动状态
        activityStatus: [],
        isDraft: 0,
      },
    };
  }

  //删除活动
  deleteActiviey = async (id) => {
    const res = await deleteActivies({
      activityBasicIds: [id],
    });
    if (res.code === 200) {
      this.getlist();
      message.success('删除成功');
    }
  };
  //编辑
  editeToPages = (id) => {
    history.push({
      pathname: '/layout/addBasic',
      query: {
        id,
      },
    });
  };
  //顶部tab栏
  callback = (key) => {
    this.setState(
      ({ pageQUery }) => {
        if (key === 'isDraft') {
          console.log('isDraft');
          pageQUery.isDraft = 1;
          pageQUery.activityStatus = [];
        } else {
          pageQUery.isDraft = 0;
          pageQUery.activityStatus = [key];
          //全部
          if (key === '') {
            pageQUery.activityStatus = [];
          }
        }
      },
      () => {
        this.getlist();
      },
    );
  };
  Mytabs = () => (
    <Tabs size="large" defaultActiveKey="" onChange={this.callback}>
      <TabPane tab="全部" key=""></TabPane>
      <TabPane tab="进行中" key="2"></TabPane>
      <TabPane tab="未开始" key="3"></TabPane>
      <TabPane tab="已结束" key="5"></TabPane>
      <TabPane tab="待审核" key="1"></TabPane>
      <TabPane tab="已驳回" key="4"></TabPane>
      <TabPane tab="草稿箱" key="isDraft"></TabPane>
    </Tabs>
  );
  componentDidMount() {
    setLocal('pageindex', 1);
    this.getlist();
  }

  //表头
  columns = [
    {
      title: '活动名称',
      dataIndex: 'activityName',
    },
    {
      title: '创建人',
      dataIndex: 'creator',
    },
    {
      title: '创建时间',
      dataIndex: 'startDate',
    },
    {
      title: '活动时间',
      dataIndex: 'startDate',
      render: (text, record) => (
        <Space size="middle">{record.startDate + '~' + record.endDate}</Space>
      ),
    },
    {
      title: '状态',
      dataIndex: 'id',
      render: (text, record) => (
        <Space size="middle">
          {record.isDraft ? '草稿' : ''}
          {record.activityStatus == 1 && record.isDraft === false
            ? '待审核'
            : ''}
          {record.activityStatus == 2 ? '进行中' : ''}
          {record.activityStatus == 3 ? '未开始' : ''}
          {record.activityStatus == 4 ? '已驳回' : ''}
          {record.activityStatus == 5 ? '已结束' : ''}
          {record.activityStatus == 6 ? '已关闭' : ''}
        </Space>
      ),
    },
    {
      title: '操作',
      render: (text, record) => (
        <Space size="middle">{this.actionRnder(record)}</Space>
      ),
    },
  ];
  //操作判断
  actionRnder = (record) => {
    if (record.isDraft) {
      return (
        <div>
          <a onClick={() => this.editeToPages(record.activityBasicId)}>编辑 </a>
          <div
            className="blueColor"
            onClick={() => this.deleteActiviey(record.activityBasicId)}
          >
            删除
          </div>
        </div>
      );
    }
    return (
      <div>
        <a
          onClick={() =>
            history.push({
              pathname: '/layout/deDetail',
              query: {
                id: record.activityBasicId,
                //详情页 用来判断不同  渲染方式
                activityStatus: record.activityStatus,
              },
            })
          }
        >
          详情 &nbsp;
        </a>
        {record.activityStatus === 4 ? (
          <div>
            <div className="blueColor">重新发布</div>{' '}
            <div
              className="blueColor"
              onClick={() => this.deleteActiviey(record.activityBasicId)}
            >
              删除
            </div>
          </div>
        ) : (
          ''
        )}
        {record.activityStatus === 2 ? (
          <div className="blueColor">关闭</div>
        ) : (
          ''
        )}
        {record.activityStatus === 3 || record.activityStatus === 5 ? (
          <div
            className="blueColor"
            onClick={() => this.deleteActiviey(record.activityBasicId)}
          >
            删除
          </div>
        ) : (
          ''
        )}
      </div>
    );
  };
  //搜素
  onSearch = (value) => {
    this.setState(
      ({ pageQUery }) => {
        pageQUery.activityName = value;
      },
      () => {
        this.getlist();
      },
    );
  };
  //获取 列表
  async getlist() {
    const res = await activiesList(this.state.pageQUery);
    //数据
    console.log(res, 'resstatus');
    this.setState({ data: res.data.rows });
    //分页
    this.setState({ total: res.data.total });
  }
  //查询  点击哪一页
  onChange = (index, size) => {
    setLocal('pageindex', index);
    this.setState(
      ({ pageQUery }) => {
        pageQUery.page = index;
        pageQUery.pageSize = size;
      },
      () => {
        this.getlist();
      },
    );
  };
  //size
  sizeChane = (current, size) => {
    console.log(current, size, 'curent');
    this.setState(
      ({ pageQUery }) => {
        pageQUery.pageSize = size;
      },
      () => {
        this.getlist();
      },
    );
  };
  //jumper
  junmper = (current, size) => {
    this.setState(
      ({ pageQUery }) => {
        pageQUery.pageSize = size;
        pageQUery.page = current;
      },
      () => {
        this.getlist();
      },
    );
  };
  //时间
  getTime = (time) => {
    const value = moment(time._d).subtract(10, 'days').calendar();
    console.log(value);
  };
  render() {
    return (
      <div>
        <div className="layout">
          <div className="title">创建活动</div>
          <div className="site-card-border-less-wrapper">
            <Card bordered={false}>
              {/* 标签页 */}
              <div className="checklist">{this.Mytabs()}</div>
              {/* 表单控件 */}
              <div className="inputchange">
                <div className="box">
                  活动名称：
                  <Search
                    placeholder="请输入名称模糊搜索"
                    onSearch={this.onSearch}
                    style={{ width: 200 }}
                  />
                  <div
                    className="box"
                    style={{ width: '200px', marginLeft: '40px' }}
                  >
                    <div className="desc"> 创建时间:</div>
                    <Input.Group compact>
                      <DatePicker
                        onChange={this.getTime}
                        format="YYYY/MM/DD"
                        style={{ width: '100%' }}
                      />
                    </Input.Group>
                  </div>
                </div>

                <div className="box1">
                  <Button type="primary">搜索</Button>
                  <Button>重置</Button>
                </div>
              </div>
              {/* 表格 */}
              <div className="tables">
                <div className="addActive">
                  <Button
                    type="primary"
                    onClick={() => history.push('/layout/addBasic')}
                  >
                    创建活动
                  </Button>
                </div>
                <Table
                  rowKey={(record) => record.id}
                  pagination={false}
                  columns={this.state.columns}
                  dataSource={this.state.data}
                />
                <div className="pagenation">
                  <div className="showtotal">
                    {'共' + this.state.total + '条数据'}
                  </div>
                  <Pagination
                    defaultCurrent={this.state.pageQUery.page}
                    total={this.state.total}
                    showSizeChanger
                    showQuickJumper
                    onShowSizeChange={this.sizeChane}
                    onChange={this.onChange}
                  />
                </div>
              </div>
            </Card>
          </div>
        </div>
      </div>
    );
  }
}
